<template>
  <div>
    <!--工具栏-->
    <div style="display: flex;justify-content: space-between">
      <div>
        <el-input placeholder="请输入员工姓名"
                  prefix-icon="el-icon-search"
                  clearable
                  @clear="initEmps"
                  style="width: 300px;margin-right: 10px;"
                  v-model="searchEmpName"
                  @keydown.enter.native="initEmps"></el-input>
        <el-button type="info" icon="el-icon-search" @click="initEmps">搜索</el-button>
        <el-button type="primary">
          <i class="fa fa-angle-double-down" aria-hidden="true"></i>
          高级搜索
        </el-button>
      </div>

      <div>
        <!--导入数据的弹框-->
        <el-dialog
            title="上传文件"
            :visible.sync="showUploadFlag"
            width="25%"
            center>
          <span slot="footer" class="dialog-footer">
            <el-button @click="showUploadFlag = false">取 消</el-button>
            <el-button type="primary" @click="uploadFile">确 定</el-button>
          </span>
          <el-upload
              style="text-align: center"
              drag
              :headers="headers"
              action="/employee/basic/import"
              multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
        </el-dialog>

        <!--导出员工信息-->
        <el-button type="primary" @click="showUploadFlag=true" :icon="downloadIcon">
          {{ downloadButtonText }}
        </el-button>

        <!--导入员工信息-->
        <el-button type="primary" @click="exportEmpData" :icon="uploadIcon">
          {{ uploadButtonText }}
        </el-button>
        <el-button type="primary" icon="el-icon-plus" @click="doAddEmp">添加员工</el-button>

        <el-dialog
            title="添加员工"
            :visible.sync="showAddEmpFlag"
            width="80%"
            center>

          <div>
            <el-form ref="empForm" :model="addEmp">
              <!--一行四列-->
              <el-row>
                <el-col :span="6">
                  <el-form-item label="姓名：" prop="name">
                    <el-input size="mini" v-model="addEmp.name" type="text" prefix-icon="el-icon-user"
                              placeholder="请输入员工姓名" style="width: 150px"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="性别：" prop="gender">
                    <el-radio-group v-model="addEmp.gender" style="margin-top: 12px;">
                      <el-radio label="1">男</el-radio>
                      <el-radio label="2">女</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="出生日期：" prop="birthday">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="addEmp.birthday"
                                    placeholder="请选择日期" size="mini" style="width: 150px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="政治面貌：" prop="politicid">
                    <el-select v-model="addEmp.politicid" clearable
                               placeholder="请选择政治面貌" size="mini" style="width: 200px">
                      <el-option
                          v-for="item in politicsStatuses"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="民族：" prop="nationid">
                    <el-select v-model="addEmp.nationid" clearable
                               placeholder="请选择民族" size="mini" style="width: 150px">
                      <el-option
                          v-for="item in nations"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="籍贯：" prop="nativeplace">
                    <el-input v-model="addEmp.nativeplace" type="text" placeholder="请输入籍贯"
                              prefix-icon="el-icon-edit" size="mini" style="width: 120px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="电子邮箱：" prop="email">
                    <el-input v-model="addEmp.email" type="text" prefix-icon="el-icon-message"
                              placeholder="请输入电子邮箱" size="mini" style="width:150px "/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="联系地址：" prop="address">
                    <el-input v-model="addEmp.address" type="text" prefix-icon="el-icon-location"
                              placeholder="请输入联系地址" size="mini" style="width:200px "/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="职位：" prop="posid">
                    <el-select v-model="addEmp.posid" clearable
                               placeholder="请选择职位" size="mini" style="width: 150px">
                      <el-option
                          v-for="item in positions"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="职称：" prop="joblevelid">
                    <el-select v-model="addEmp.joblevelid" clearable
                               placeholder="请选择职位" size="mini" style="width: 120px">
                      <el-option
                          v-for="item in joblevels"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="所属部门：" prop="departmentid">
                    <el-input v-model="addEmp.departmentid" type="text" prefix-icon="el-icon-edit"
                              placeholder="请输入部门" size="mini" style="width:150px "/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="电话号码：" prop="phone">
                    <el-input v-model="addEmp.phone" type="text" prefix-icon="el-icon-phone-outline"
                              placeholder="请输入电话号码" size="mini" style="width:200px "/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="工号：" prop="workid">
                    <el-input v-model="addEmp.workid" type="text" prefix-icon="el-icon-edit"
                              placeholder="请选择学历" size="mini" style="width: 150px" disabled/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="学历：" prop="tiptopdegree">
                    <el-select v-model="addEmp.tiptopdegree" clearable
                               placeholder="请选择学历" size="mini" style="width: 120px">
                      <el-option
                          v-for="item in tiptopDegrees"
                          :key="item"
                          :label="item"
                          :value="item">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="毕业院校：" prop="school">
                    <el-input v-model="addEmp.school" type="text" prefix-icon="el-icon-edit"
                              placeholder="请输入毕业院校" size="mini" style="width:150px "/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="专业名称：" prop="specialty">
                    <el-input v-model="addEmp.specialty" type="text" prefix-icon="el-icon-edit"
                              placeholder="请输入专业名称" size="mini" style="width:200px "/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="入职日期：" prop="begindate">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="addEmp.begindate"
                                    placeholder="请选择入职日期" size="mini" style="width: 150px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="转正日期：" prop="conversiontime">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="addEmp.conversiontime"
                                    placeholder="请选择转正日期" size="mini" style="width: 120px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="合同起始日期：" prop="begincontract">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="addEmp.begincontract"
                                    placeholder="请选择合同起始日期" size="mini" style="width: 150px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                  <el-form-item label="合同终止日期：" prop="endcontract">
                    <el-date-picker value-format="yyyy-MM-dd" v-model="addEmp.endcontract"
                                    placeholder="请选择合同终止日期" size="mini" style="width: 200px"/>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <el-form-item label="身份证号：" prop="idcard">
                    <el-input v-model="addEmp.idcard" type="text" prefix-icon="el-icon-edit"
                              placeholder="请输入身份证号" size="mini" style="width: 250px"/>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="聘用形式：" prop="engageform">
                    <el-radio-group v-model="addEmp.engageform" style="margin-top: 12px;">
                      <el-radio label="1">劳动合同</el-radio>
                      <el-radio label="2">劳务合同</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="婚姻状况：" prop="wedlock">
                    <el-radio-group v-model="addEmp.wedlock" style="margin-top: 12px;">
                      <el-radio label="1">已婚</el-radio>
                      <el-radio label="2">未婚</el-radio>
                      <el-radio label="3">离异</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="7">
                </el-col>
              </el-row>
            </el-form>
          </div>

          <span slot="footer" class="dialog-footer">
                <el-button @click="showAddEmpFlag = false">取 消</el-button>
                <el-button type="primary" @click="showAddEmpFlag = false">确 定</el-button>
            </span>
        </el-dialog>
      </div>
    </div>

    <!--表格数据-->
    <div style="margin-top: 10px;">
      <el-table
          v-loading="loading"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          @selection-change="handleSelectionChange"
          :data="emps"
          border
          stripe
          style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column
            prop="name"
            label="姓名"
            fixed
            align="left"
            width="90">
        </el-table-column>
        <el-table-column
            prop="workid"
            label="工号"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            align="left"
            width="35">
        </el-table-column>
        <el-table-column
            prop="birthday"
            label="出生日期"
            align="left"
            width="110">
        </el-table-column>
        <el-table-column
            prop="idcard"
            label="身份证号"
            align="left"
            width="200">
        </el-table-column>
        <el-table-column
            prop="wedlock"
            label="婚姻状况"
            align="left"
            width="85">
        </el-table-column>
        <el-table-column
            prop="nation.name"
            label="名族"
            align="left"
            width="50">
        </el-table-column>
        <el-table-column
            prop="nativeplace"
            label="籍贯"
            align="left"
            width="60">
        </el-table-column>
        <el-table-column
            prop="politicsStatus.name"
            label="政治面貌"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            align="left"
            width="180">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话号码"
            align="left"
            width="120">
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址"
            align="left"
            width="260">
        </el-table-column>
        <el-table-column
            prop="department.name"
            label="部门"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="joblevel.name"
            label="职称"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="position.name"
            label="职位"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="engageform"
            label="聘用形式"
            align="left"
            width="100">
        </el-table-column>
        <el-table-column
            prop="tiptopdegree"
            label="最高学历"
            align="left"
            width="80">
        </el-table-column>
        <el-table-column
            prop="school"
            label="学校"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            prop="specialty"
            label="专业"
            align="left"
            width="150">
        </el-table-column>
        <el-table-column
            prop="workstate"
            label="在职状态"
            align="left"
            width="70">
        </el-table-column>
        <el-table-column
            prop="begindate"
            label="入职日期"
            align="left"
            width="110">
        </el-table-column>
        <el-table-column
            prop="conversiontime"
            label="转正日期"
            align="left"
            width="110">
        </el-table-column>
        <el-table-column
            prop="begincontract"
            label="合同起始日期"
            align="left"
            width="110">
        </el-table-column>
        <el-table-column
            prop="endcontract"
            label="合同截止日期"
            align="left"
            width="110">
        </el-table-column>
        <el-table-column
            label="合同期限"
            align="left"
            width="100">
          <template slot-scope="scope">
            <el-tag>{{ scope.row.contractterm }}</el-tag>
            年
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            fixed="right"
            width="300">
          <template slot-scope="scope">
            <el-button style="padding: 3px;" type="info" icon="el-icon-edit" size="mini">编辑</el-button>
            <el-button style="padding: 3px;" type="primary" icon="el-icon-edit" size="mini">查看高级资料</el-button>
            <el-button style="padding: 3px;" type="danger" icon="el-icon-edit" size="mini">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <div style="display: flex; justify-content: center; margin-top: 20px;">
        <el-pagination
            background
            layout="total,prev, pager, next,jumper,->,sizes"
            :total="pageInfo.total"
            @size-change="currentPageSizeChange"
            @current-change="currentPageNumChange">
        </el-pagination>
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name: "EmpBasic",
  data() {
    return {
      emps: [],
      loading: false,
      // 分页组件数据
      pageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
        sizes: [10, 20, 30, 50],
      },
      searchEmpName: '',
      // 展示文件上传弹框
      showUploadFlag: false,
      downloadButtonText: '导入数据',
      uploadButtonText: '导出数据',
      uploadIcon: 'el-icon-upload2',
      downloadIcon: 'el-icon-download',
      // 请求头
      headers: {
        Authorization: window.sessionStorage.getItem('tokenStr'),
      },
      // 添加员工的弹框
      showAddEmpFlag: false,
      // 民族下拉框数据
      nations: [],
      // 职称下拉框数据
      joblevels: [],
      // 政治面貌下拉框数据
      politicsStatuses: [],
      // 职位下拉框数据
      positions: [],
      // 学历数据
      tiptopDegrees: ['博士', '硕士', '本科', '大专', '高中', '初中', '小学', '其他'],
      // 添加员工的对象
      addEmp: {
        name: '',
        gender: '',
        birthday: '',
        idcard: '',
        wedlock: '',
        nationid: '',
        nativeplace: '',
        politicid: '',
        email: '',
        phone: '',
        address: '',
        departmentid: '',
        joblevelid: '',
        posid: '',
        engageform: '',
        tiptopdegree: '',
        specialty: '',
        school: '',
        begindate: '',
        workstate: '',
        workid: '',
        contractterm: '',
        conversiontime: '',
        notworkdate: '',
        begincontract: '',
        endcontract: '',
        workage: '',
        salaryid: '',
        salary: null
      },
    }
  },
  mounted() {
    this.initEmps();
    this.initAddEmpData();
    this.initPositions();
    this.getMaxWorkID();
  },
  methods: {
    // 获取最大工号
    getMaxWorkID() {
      this.getRequest('/employee/basic/maxWorkID')
          .then(result => {
            if (result.code == 200) {
              this.addEmp.workid = result.data;
            }
          })
    },
    // 点击职位下拉框时调用
    initPositions() {
      this.getRequest('/employee/basic/positions')
          .then(result => {
            if (result) {
              this.positions = result;
            }
          })
    },
    // 初始化添加弹框的数据
    initAddEmpData() {
      // 将不经常变动的数据存入sessionStorage
      // 判断sessionStorage有没有数据,没有就发送请求获取数据
      // 民族
      if (!sessionStorage.getItem('nations')) {
        this.getRequest('/employee/basic/nations')
            .then(result => {
              if (result) {
                this.nations = result;
                // 转为json
                window.sessionStorage.setItem('nations', JSON.stringify(result));
              }
            })
      } else {
        this.nations = JSON.parse(sessionStorage.getItem('nations'));
      }
      // 职称
      if (!sessionStorage.getItem('joblevels')) {
        this.getRequest('/employee/basic/joblevels')
            .then(result => {
              if (result) {
                this.joblevels = result;
                // 转为json
                window.sessionStorage.setItem('joblevels', JSON.stringify(result));
              }
            })
      } else {
        this.joblevels = JSON.parse(sessionStorage.getItem('joblevels'));
      }
      // 政治面貌
      if (!sessionStorage.getItem('politicsstatus')) {
        this.getRequest('/employee/basic/politicsstatus')
            .then(result => {
              if (result) {
                this.politicsStatuses = result;
                // 转为json
                window.sessionStorage.setItem('politicsstatus', JSON.stringify(result));
              }
            })
      } else {
        this.politicsStatuses = JSON.parse(sessionStorage.getItem('politicsstatus'));
      }

    },

    // 添加员工
    doAddEmp() {
      this.showAddEmpFlag = true;
      this.postRequest('/employee/basic/', this.addEmp)
          .then(result => {
            if (result) {
              this.initEmps();
            }
          })
    },


    // 初始化表格数据
    initEmps() {
      // 设置加载动画
      this.loading = true;
      this.getRequest('/employee/basic/?pageSize=' + this.pageInfo.pageSize
          + '&pageNum=' + this.pageInfo.pageNum + '&name=' + this.searchEmpName)
          .then(result => {
            if (result) {
              this.loading = false;
              this.emps = result.data;
              this.pageInfo.total = result.total;
            }
          })
    },

    // 导出员工数据
    exportEmpData() {
      if (this.downloadRequest('/employee/basic/export')) {
        this.$message.success('导出成功,正在下载');
      }
    },

    // 导入员工数据
    uploadFile() {
      this.$message.success('导入成功');
      this.initEmps();
      this.showUploadFlag = false;
    },

    // 分页
    // 当前每页显示条数改变
    currentPageSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.initEmps();
    },
    // 当前页码改变
    currentPageNumChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.initEmps();
    },

    handleSelectionChange() {

    },
  }
}
</script>

<style>

</style>